<template>
<!-- 	<view class='swiper' v-if="jdata.params.list && count">
		<swiper class="swiper-c" 
		indicator-active-color = "#FFFFFF" 
		circular="true"
		:indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay" 
		:interval="jdata.params.duration"
		 :duration="swiper.duration">
			<swiper-item class="have-none" v-for="(item, index) in jdata.params.list" :key="index">
				<image class='bannnerImage'  :src="item.image" @click="showSliderInfo(item.linkType, item.linkValue)" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
	</view> -->
	
	
			<view class="swiper-3d">
				<swiper :current="swiper.current" class="s-container" @change="swiperChange" 
				:circular="swiper.circular"
				:autoplay= "swiper.autoplay"
				:indicator-dots="swiper.indicatorDots" 
				:interval="swiper.interval" 
				:duration="swiper.duration"
				>
					<swiper-item class="swiper-item"  v-for="(item,index) in jdata.params.list" :key= "index">
						<image class="item-img" :src="item.image" mode="aspectFill" :class="swiper.current == index?'active':''"
						@click="showSliderInfo(item.linkType, item.linkValue)"></image>
					</swiper-item>
				</swiper>
				<view class="swiper-dot">
					<block v-for="(item,index) in jdata.params.list" :key= "index">
						<view class="dot" v-if="swiper.current == index"></view>
						<view class="dot2" v-if="swiper.current != index"></view>
					</block>
				</view>
			</view>

	
</template>

<script>
	export default {
		name: "jshopimgSlide",
		props: {
			jdata: {
				// type: Object,
				required: true,
			}
		},
		data() {
			return {
				swiper: {
					indicatorDots: false,
					autoplay: true,
					interval: 3000,
					duration: 700,
					circular : true,
					current:0,
				},
				
			};
		},
		computed: {
			count() {  
				return (this.jdata.params.list.length > 0)
			}
		},
		created() {},
		watch: {},
		methods: {
			
			swiperChange(e){
					this.swiper.current = e.detail.current;
			},
			
			// 广告点击查看详情
			showSliderInfo(type, val) {
				if (!val) {
					return;
				}
				if (type == 1) {
					if (val.indexOf('http') != -1) {
						// #ifdef H5 
						window.location.href = val
						// #endif
						// #ifndef H5
						uni.navigateTo({
							url: '/pages/webview/index.vue?src=' + val
						})
						// #endif
					} else {
						// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE || MP
						if (val == '/pages/index/index' || val == '/pages/classify/classify' || val == '/pages/cart/index/index' || val == '/pages/member/index/index') {
							uni.switchTab({
								url: val
							});
							return;
						} else if (val.indexOf('/pages/coupon/coupon') > -1) {
							var id = val.replace('/pages/coupon/coupon?id=', "");
							this.receiveCoupon(id)
						} else {
							this.$common.navigateTo(val);
							return;
						}
						// #endif
					}
				} else if (type == 2) {
					// 商品详情
					this.goodsDetail(val)
				} else if (type == 3) {
					// 文章详情
					this.$common.navigateTo('/pages/article/index?id=' + val + '&id_type=1')
				} else if (type == 4) {
					// 文章列表
					this.$common.navigateTo('/pages/article/list?cid=' + val)
				} else if (type == 5) {
					//智能表单 
					this.$common.navigateTo('/pages/form/detail/form?id=' + val)
				}
			},
			//跳转到商品详情页面
			goodsDetail: function(id) {
				let url = '/pages/goods/index/index?id=' + id;
				this.$common.navigateTo(url);
			},
			// 用户领取优惠券
			receiveCoupon(couponId) {
				let data = {
					promotion_id: couponId
				}
				this.$api.getCoupon(data, res => {
					if (res.status) {
						this.$common.successToShow(res.msg)
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
		}
	}
</script>

<style>
	
	
	.swiper-3d{
		/* padding:0upx 20upx; */
		
		/* background-color: #007AFF; */
		
		/* margin-top: 30upx; */

		
		width: 750upx;
		
		
		height: 645upx;
		
		z-index: 111;
		
	}
	
	
	.s-container{
		width: 750upx;
	
	
		height: 778upx;
		
		/* background-color: #2C405A; */
		
		z-index: 112;
	
	}
	
	
	.swiper-item {
		/* max-width: 630upx; */
		/* height: 100%; */
		
		width: 750upx;
		
		/* position: relative; */
			
	/* 	left: 60upx;
		
		margin-right: 60upx; */
			
		height: 930upx;
		
		/* padding: 0upx 20upx; */
		/* box-sizing: border-box; */
		/* position: relative; */
		
		/* background-color: #0D9E13; */
		
	}
	


	

	

	
	
	.item-img {
		
		/* box-shadow: 0px 2px 4px 0px rgba(166, 166, 166, 40); */
		
		/* left: 60upx; */
		
		/* margin-right: 60upx; */
		
		width: 750upx;
		
		/* border-radius: 20upx; */
			
			
		height: 930upx;
		
		
		/* box-shadow:   0px 2upx 4upx rgba(0,0,0,0.03),  0upx 4upx 8upx rgba(0,0,0,0.03),0upx 6upx 14upx rgba(0,0,0,0.06); */
		
		
		/* background-color: #007AFF; */
		
		/* box-shadow:0px 4upx 15upx 0px rgba(153,153,153,0.24); */
	/* 	width: 100%;
		height: 80%; */
	
/* 		z-index: 5;
		
		margin-top: 5%;
		
		margin-left: 10%; */
		
		/* margin-right: 10%; */
		
	/* 	width: 80%;
		height: 90%; */
		
	/* 	width: 100%;
		
		height: 100%; */
	

		 /* transform: translateY(-50%); */
		
		
			z-index: 113;
		
	}
	
	.active {
			
/* 			margin-top: 0;
		
			z-index: 10;
			
			width: 100%;
			
			height: 98%;
			
			margin-left: 0;
			
			margin-right: 0;
		
			transition: all .1s ease-in 0s;
			transform: translateY(0); */
	}
	
	
	.swiper-dot{
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		
		width: 100%;
		
		margin-top: -170upx;
		
		z-index: 9999;
		
		/* background-color: #007AFF; */
	
	
	}
	
	

	
	
	.dot{
		margin: 0 10upx;
		width: 40upx;
		height: 10upx;
		border-radius: 15upx;
		background-color: rgba(85, 101, 251, 100);
		
		background: #FF5A5F;
	
	}
	
	.dot2{
		
		margin: 0 10upx;
		width: 20upx;
		height: 10upx;
		border-radius: 15upx;
		/* border-radius: 50%; */
		background: rgba(255,255,255,1);
	
			/* background:rgba(138, 163, 185, 100); */
		
	}
	

</style>
